<script setup lang="ts">
  import { useRoute, useRouter } from 'vue-router'
  import { NIcon } from 'naive-ui'
  import { PlusOutlined } from '@vicons/material'

  const router = useRouter()
  const route = useRoute()
  const emit = defineEmits(['createLibrary'])

  const navList = [
    {
      name: '方案生成',
      path: '/create/libraryScheme',
    },
    {
      name: '方案审核',
      path: '/create/librarySchemeAudit',
    },
  ]

  const isActive = (path: string) => {
    return route.path === path
  }

  const handleCreateLibrary = () => {
    emit('createLibrary')
  }

  const handleAuditLibrary = async () => {
    await router.push('/createToAudit')
  }
</script>

<template>
  <div class="h-[58px] bg-white rounded flex items-center px-5 justify-between">
    <div class="flex items-center gap-10 h-full leading-[58px] pingfang">
      <div
        v-for="item in navList"
        :key="item.path"
        class="h-full flex items-center"
        @click="router.push(item.path)"
      >
        <span
          class="text-[20px] text-[#000000] font-bold cursor-pointer"
          :class="{ 'text-[#0B5CFF] border-b-2 border-[#0B5CFF]': isActive(item.path) }"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div>
      <div
        v-if="route.path === '/create/libraryScheme'"
        class="h-full leading-[58px] flex items-center gap-4"
      >
        <div
          @click="handleCreateLibrary"
          class="h-8 flex items-center gap-1 bg-[#0B5CFF] rounded px-4 cursor-pointer hover:bg-[#0B5CFF]/80"
        >
          <NIcon class="text-[16px] text-white">
            <PlusOutlined />
          </NIcon>
          <span class="text-[14px] text-white font-medium">新建方案库</span>
        </div>
        <div
          @click="handleAuditLibrary"
          class="h-8 flex items-center border border-[#0B5CFF] hover:border-[#0B5CFF90] hover:text-[#0B5CFF90] text-[#0B5CFF] rounded px-4 cursor-pointer font-medium"
        >
          <span class="text-[14px]">待我审核</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
